<template>
	<view class="container">
		<view class="header">
			<!-- TODO: 图片应从接口获取 -->
			<u-avatar src="/static/logo.png" size="50"></u-avatar>
			<view class="user-info">
				<view class="username">{{ user.name }}</view>
				<u-tag text="监管者" shape="circle" plain type="success" style="width: 70px;"/>
			</view>
		</view>

		<u-cell-group :customStyle="cellGroup">
			<u-cell icon="lock-open" title="修改密码" @click="notImplemented" size="large" :iconStyle="{ color: '#00B54E'}" center></u-cell>
			<u-cell icon="share" title="关联四川省追溯平台" @click="notImplemented" size="large" :iconStyle="{ color: '#00B54E'}" center></u-cell>
			<u-cell icon="reload" title="软件更新" @click="notImplemented" size="large" :iconStyle="{ color: '#00B54E'}" center></u-cell>
			<u-cell icon="close" title="退出登录" @click="logout" size="large" :iconStyle="{ color: '#00B54E'}" center></u-cell>
			<u-cell icon="info-circle" title="咨询热线" @click="notImplemented" size="large" :iconStyle="{ color: '#00B54E'}" center></u-cell>
		</u-cell-group>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {
				name: 'PDQ01' // TODO: 应从接口获取
			},
			cellGroup: {
				color: "#000756"
			},
		};
	},
	onLoad() {
		this.getUsername()
	},
	methods: {
		getUsername(){
			this.user.name = uni.getStorageSync('username');
		},
		logout() {
			// TODO: 调用退出登录接口
			uni.reLaunch({
				url: '/pages/regulator/login'
			});
		},
		notImplemented() {
			uni.showToast({
				title: '功能暂未实现',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
}
.header {
	display: flex;
	align-items: center;
	padding: 40rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
}
.user-info {
	width: auto;
	margin-left: 30rpx;
}
.username {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.logout-btn-container {
	margin: 30rpx;
}
</style>